<template>
	<div id="header">
		<div class="left"><span class="iconfont">&#xe69a;</span></div>
		<div class="center_put">
			<span class="iconfont">&#xe604;</span>
			<input type="text" placeholder="请输入城市/景点/游玩主题"/>
		</div>
		<div class="right">{{city}}<span class="iconfont">&#xe602;</span></div>
	</div>
</template>

<script>
	export default{
		name:"Header",
		props:{//在子组件中接受参数
			city:String//接受参数认证
		}
	}
</script>

<style lang="stylus" scoped>
	#header{
		width:100%;
		height:0.44rem;
		display:flex;
		justify-content:space-between;
		align-items:center;/*垂直居中*/
		background:#009CCD;
		color:white;
		
	}
	#header .left{
		font-size:0.2rem;
		padding-left:0.1rem;
		margin-right:0.1rem;
	}
	#header .center_put{
		flex:1;
		width:100%;
		border-radius:5px;
		height:0.3rem;
		line-height:0.28rem;
		color:#cacaca;
		background:white;
		}
	#header .center_put input{width:85%;}
	#header .center_put span{
		display:inline-block;
		vertical-align:middle;
		line-height:0.3rem;
	}
	#header .right{
		padding-right:0.1rem;
		margin-left:0.1rem;
	}
	
</style>